<!-- LoadingWrapper.svelte -->
<script lang="ts">
	import Button from '@smui/button';
	import Page_404 from './404.svelte';
	import Page_500 from './500.svelte';

	let className = '';

	export let err_status: number | string = '';
	export let loading = false; // 加载状态属性
	export let style = '';
	export { className as class };

	function reloadHtmlPage() {
		window.location.reload();
	}
</script>

{#if loading}
	<div class={['loading-placeholder', className].join(' ')} {style}>
		<!-- 可以在这里自定义一个加载动画或占位符 -->
		<p class="font-size-40px font-italic m-2 color-gray-6">loading...</p>
		<div class="loader"></div>
	</div>
{:else if err_status === 404}
	<Page_404 />
{:else if err_status === 500}
	<Page_500 />
{:else if err_status === 504}
	<div class="w-full h-full min-h-400px flex items-center flex-col">
		<h1>
			Sorry,
			<span class="font-size-2xl">the request has <span class="color-red-4">timed out</span></span>
		</h1>
		<Button class="" variant="raised" on:click={reloadHtmlPage}>reload page</Button>
	</div>
{:else}
	<slot /> <!-- 通过插槽展示传入的内容 -->
{/if}

<style>
	.loading-placeholder {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		padding-top: 100px;
		align-items: center;
	}
	.loader {
		width: 250px;
		height: 20px;
		border-radius: 20px;
		background:
			repeating-linear-gradient(135deg, var(--mdc-theme-primary) 0 10px, #527deb 0 20px) 0/0%
				no-repeat,
			repeating-linear-gradient(135deg, #ddd 0 10px, #eee 0 20px) 0/100%;
		animation: l3 2s infinite;
	}
	@keyframes l3 {
		100% {
			background-size: 100%;
		}
	}
</style>
